<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/11/9 23:55
 -->
<template>
  <div class="page flex h-[calc(100vh-143px)]">
    <div class="w-400px flex-shrink-0 bg-[#fff] px-12px py-4px">
      <g-title>角色管理</g-title>
      <div class="flex mt-2px items-center">
        <el-input placeholder="角色名过滤" clearable></el-input>
        <el-tooltip content="搜索" placement="top-start">
          <el-button type="text" class="!ml-6px">
            <i class="icon-portal-site-sousuo iconfont-ps text-20px"></i>
          </el-button>
        </el-tooltip>

        <el-tooltip content="新增角色" placement="top-start">
          <el-button type="text" class="!ml-6px" @click="onShowDialog('add')">
            <i class="cursor-pointer icon-portal-site-jiemuxinzeng iconfont-ps !text-22px"></i>
          </el-button>
        </el-tooltip>
      </div>

      <div class="mt-8px">
        <g-table v-bind="roleTable"></g-table>
        <g-pagination v-if="rolePage.total" v-bind.sync="rolePage" class="mt-8px"></g-pagination>
      </div>
    </div>

    <div class="flex-1 bg-[#fff] ml-10px px-12px py-4px">
      <g-title>菜单绑定【系统管理员】</g-title>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>菜单</span>
        </div>
        <div class="overflow-y-auto h-[calc(300px)]">
          <el-tree
            ref="tree"
            :data="data"
            show-checkbox
            default-expand-all
            node-key="id"
            class="tree-line"
            highlight-current
            :props="defaultProps"
          >
            <!--                  icon-class="el-icon-circle-plus-outline"
      -->
          </el-tree>
        </div>
      </el-card>

      <div class="flex justify-center py-10px">
        <el-button type="primary">保存</el-button>
      </div>
    </div>

    <!-- 新增    -->
    <RoleAddEditDialog ref="add" :visible.sync="visible.add" :model="1"></RoleAddEditDialog>

    <!-- 编辑    -->
    <RoleAddEditDialog ref="edit" :visible.sync="visible.edit" :model="2"></RoleAddEditDialog>
  </div>
</template>

<script>
import RoleAddEditDialog from './components/RoleAddEditDialog.vue'
export default {
  components: { RoleAddEditDialog },

  data() {
    return {
      visible: {
        add: false,
        edit: false
      },
      roleTable: {
        // 审批待办
        loading: true,
        data: [],
        // height: `calc(100vh - 290px)`,
        height: `calc(100vh - 235px)`,
        columns: [
          { prop: 'title', label: '角色名', align: 'center' },
          { prop: 'title', label: '角色描述', align: 'center' },
          { slot: 'operation', label: '操作', width: '150px', align: 'center' }
        ]
      },
      rolePage: {
        page: 1,
        total: 0,
        size: 5,
        background: true,
        layout: 'total, prev, pager, next'
      },
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    this.$once('hook:beforeDestroy', () => {
      // this.removeEvents()
    })
  },

  methods: {
    onShowDialog(type) {
      if (type == 'add') {
        this.visible.add = true
        this.$nextTick(() => {})
      } else if (type == 'edit') {
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  ::v-deep .el-card {
    .el-card__header {
      background: #f5f5f5;
      padding: 8px 12px;
    }
    .el-card__body {
      padding: 8px 12px;
    }
  }

  ::v-deep .el-tree {
    .el-tree-node__content {
      height: 28px;
      .el-tree-node__expand-icon {
        &:not(.is-leaf) {
          font-size: 16px;
          color: #8c8c8c;
        }
      }
    }
  }
}
</style>
